<template>
	<curstom-head-top>
		<template #left>壁纸管理</template>
		<template #right>
			<button size="mini" type="primary" @click="handAdd">
				<uni-icons type="plusempty" size="18" color="#FFFFFF"></uni-icons>
				增加分类</button>
			<button size="mini" type="warn">
				<uni-icons type="trash" size="18" color="#FFFFFF"></uni-icons>
				批量删除</button>
		</template>
	</curstom-head-top>
	<view class="table-container">
		<uni-table border stripe emptyText="暂无更多数据">
			<!-- 表头行 -->
			<uni-tr>
				<uni-th align="center">缩略图</uni-th>
				<uni-th align="center">分类名称</uni-th>
				<uni-th align="center">排序</uni-th>
				<uni-th align="center">是否推荐</uni-th>
				<uni-th align="center">是否启用</uni-th>
				<uni-th align="center">操作</uni-th>
			</uni-tr>
			<!-- 表格数据行 -->
			<uni-tr v-for="item in 10">
				<uni-td align="center">
					<image class="thumbnail" src="/static/logo.png" mode="aspectFill"></image>
				</uni-td>
				<uni-td align="center">
					<text class="category-name">明星美女</text>
				</uni-td>
				<uni-td align="center">
					<text class="order-num">{{item++}}</text>
				</uni-td>
				<uni-td align="center">
					<!-- 标签 -->
					<uni-tag text="推荐" inverted type="error" size="small" class="tag-recommend" />
				</uni-td>
				<uni-td align="center">
					<!-- 是否启用开关 -->
					<switch class="status-switch" color="#007AFF" @change="switch1Change" />
				</uni-td>
				<uni-td align="center">
					<view class="operate-btn-group">
						<button size="mini" type="primary" class="btn-edit">
							<uni-icons type="compose" size="14" color="#007AFF"></uni-icons>
							<text>修改</text>
						</button>
						<button size="mini" type="warn" class="btn-delete">
							<uni-icons type="trash" size="14" color="#DD524D"></uni-icons>
							<text>删除</text>
						</button>
					</view>
				</uni-td>
			</uni-tr>
		</uni-table>

		<view class="paging">
			<!-- 分页按钮 -->
			<uni-pagination title="标题文字" show-icon="true" total="50" current="2"></uni-pagination>
		</view>

		<!-- 弹出框 -->
		<classifyPopupVue ref="classPopRef"></classifyPopupVue>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import classifyPopupVue from './Children/classifyPopup.vue';
	const classPopRef = ref(null); // 父组件中的ref引用
	
	// 这里可以添加逻辑代码
	const switch1Change = (e) => {
		console.log('switch状态改变：', e.detail.value);
	}
	
	const handAdd = () => {
		// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
		classPopRef.value.open();
	}
</script>

<style lang="scss" scoped>
	.table-container {
		padding: 20rpx;
		background-color: #f8f8f8;

		:deep(.uni-table) {
			border-radius: 8rpx;
			overflow: hidden;
			box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
		}

		:deep(.uni-table-th) {
			background-color: #f2f6fc;
			font-weight: bold;
			color: #333;
			padding: 16rpx 10rpx;
		}

		:deep(.uni-table-td) {
			padding: 16rpx 10rpx;
		}

		.thumbnail {
			width: 80rpx;
			height: 80rpx;
			border-radius: 4rpx;
			object-fit: cover;
		}

		.category-name {
			font-weight: 500;
			color: #333;
		}

		.order-num {
			color: #666;
			font-size: 28rpx;
		}

		.tag-recommend {
			transform: scale(0.9);
		}

		.status-switch {
			transform: scale(0.7);
		}

		.classifyPopup {
			background-color: #f2f6fc;
			width: 600px;
			height: 200px;
		}
	}
</style>